<template>
  <div>
    <el-dialog
      title="查询结果"
      :visible.sync="dialogTableVisible"
      :modal="false"
      :close-on-click-modal="false"
      v-dialogDrags
      width="36%"
      style="margin-top: 10vh"
      @close="closed"
    >
      <el-table
        :data="gusmmDataList"
        v-loading="loading"
        stripes
        highlight-current-row
        height="50vh"
      >
        <el-table-column label="序号" width="50" align="center" type="index" />
        <el-table-column
          label="标识码"
          width="150"
          align="center"
          prop="objcode"
        />
        <el-table-column
          label="名称"
          width="100"
          align="center"
          :show-overflow-tooltip="true"
          prop="objname"
        ></el-table-column>
        <el-table-column
          label="占地面积(㎡)"
          width="120"
          align="center"
          :show-overflow-tooltip="true"
          prop="zhandmj"
          :formatter="formatNumber"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              v-if="false"
              @click="handleView(scope.row, scope.index)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-location-outline"
              @click="handleLocate(scope.row, scope.index)"
              >定位</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        layout="total, sizes,prev, pager, next"
        @pagination="getGusmmList"
      />
    </el-dialog>
    <road-detail-dialog ref="roadDetailDialog"></road-detail-dialog>
  </div>
</template>

<script>
import { arcgisToGeoJSON } from "@terraformer/arcgis";
import { geojsonToWKT } from "@terraformer/wkt";
import Graphic from "@arcgis/core/Graphic";
import roadDetailDialog from "../../components/Map/roadDetailDialog";
export default {
  components: {
    roadDetailDialog,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      mapview: undefined,
      activeName: "1",
      gusmmTotal: 0,
      gyldTotal: 0,
      fhldTotal: 0,
      gcydTotal: 0,
      fsldTotal: 0,
      qyldTotal: 0,
      gusmmDataList: [],
      gyldDataList: [],
      fhldDataList: [],
      gcydDataList: [],
      fsldDataList: [],
      qyldDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        objname: undefined,
        objcode: undefined,
        type: undefined,
        type_m: undefined,
        type_s: undefined,
        suosjd: undefined,
        suossq: undefined,
        yhmcname: undefined,
        layername: undefined,
        geometry: null,
      },
      dialogTableVisible: false,
      roadFeatureLayer: undefined,
      roadldFeatureLayer: undefined,
      qitaldFeatureLayer: undefined,
      gusmmFeatureLayer: undefined,
      total: 0,
    };
  },
  computed: {
    // ...mapGetters("mapStore", [
    //   "shequFeatureLayer",
    //   "roadFeatureLayer",
    //   "roadldFeatureLayer",
    //   "qitaldFeatureLayer",
    //   "gusmmFeatureLayer",
    // ]),
  },
  created() {
    // formatNumber1();
  },
  methods: {
    formatNumber(row, column) {
      let cellValue = row[column.property];
      console.log("formatNumber");
      if (cellValue == null || cellValue == "") return "";
      return Number(cellValue).toFixed(2);
    },
    /**
     * @description: 显示弹窗
     * @return {*}
     */
    show() {
      this.dialogTableVisible = true;
    },

    /**
     * @description: 根据传入的空间范围查询分类查询绿地数据
     * @param {*} mapview
     * @param {*} geometry 查询范围
     * @return {*}
     */
    getList(mapview, geometry) {
      let _self = this;
      _self.mapview = mapview;
      _self.roadFeatureLayer = _self.mapview.map.layers.items.filter(
        (item) => item.id == "roadlayer"
      )[0];
      // 将arcgis几何信息转成wkt，方便后台sql查询数据
      _self.queryParams.geometry = geojsonToWKT(
        arcgisToGeoJSON(geometry.toJSON())
      );
      // _self.getGusmmList();
    },
    getGusmmList() {},
    /** 详细按钮操作 */
    handleView(row) {
      let _self = this;

      _self.handleLocate(row, true);
    },

    /**
     * @description: 定位按钮操作
     * @param {*} row
     * @param {*} toDetail  是否同时弹出详情窗口
     * @return {*}
     */
    handleLocate(row, toDetail) {
      let _self = this;
      let paramObj = undefined;
      console.log(row);
      if (row == null) return;
      if (_self.selectedGraphic != null)
        _self.mapview.graphics.remove(_self.selectedGraphic);

      // 调用js api查询要素
      let queryParams = {
        returnGeometry: true,
        //使用hightlight必须得有objectid
        outFields: ["*"],
        where: `objectid=${row.objectid}`,
      };
      switch (row.layername) {
        case "dianzld":
          _self.featureLayer = _self.roadFeatureLayer;
          _self.roadFeatureLayer
            .queryFeatures(queryParams)
            .then((featureSet) => {
              if (
                featureSet.features.length == 0 ||
                featureSet.features[0].geometry == null
              ) {
                _self.$message.error("暂无空间信息");
                return;
              }
              _self.selectFeature = featureSet.features[0];
              _self.mapview.goTo({
                target: featureSet.features[0].geometry,
                zoom: 20,
              });
              _self.selectedGraphic = new Graphic({
                geometry: featureSet.features[0].geometry,
                symbol: window.mapConfig.symbols.pointLocate,
              });
              _self.mapview.graphics.add(_self.selectedGraphic);
              paramObj = {
                feature: _self.selectFeature,
                featureLayer: _self.featureLayer,
              };
              if (toDetail)
                _self.$refs.dianzldDetailDialog.show(
                  _self.mapview,
                  _self.dianzldFeatureLayerView,
                  _self.selectFeature
                );
            });
          break;
        case "roadld":
          _self.featureLayer = _self.roadldFeatureLayer;
          _self.roadldFeatureLayer
            .queryFeatures(queryParams)
            .then((featureSet) => {
              if (
                featureSet.features.length == 0 ||
                featureSet.features[0].geometry == null
              ) {
                _self.$message.error("暂无空间信息");
                return;
              }
              _self.selectFeature = featureSet.features[0];
              _self.mapview.goTo(
                featureSet.features[0].geometry.extent.expand(1)
              );
              _self.selectedGraphic = new Graphic({
                geometry: featureSet.features[0].geometry,
                symbol: window.mapConfig.symbols.polygonLocate,
              });
              _self.mapview.graphics.add(_self.selectedGraphic);
              paramObj = {
                feature: _self.selectFeature,
                featureLayer: _self.featureLayer,
              };
              if (toDetail)
                _self.$refs.roadldDetailDialog.show(
                  _self.mapview,
                  _self.dianzldFeatureLayerView,
                  _self.selectFeature,
                  false
                );
            });
          break;
        case "qitald":
          _self.featureLayer = _self.qitaldFeatureLayer;
          _self.qitaldFeatureLayer
            .queryFeatures(queryParams)
            .then((featureSet) => {
              if (
                featureSet.features.length == 0 ||
                featureSet.features[0].geometry == null
              ) {
                _self.$message.error("暂无空间信息");
                return;
              }
              _self.selectFeature = featureSet.features[0];
              _self.mapview.goTo(
                featureSet.features[0].geometry.extent.expand(1)
              );
              _self.selectedGraphic = new Graphic({
                geometry: featureSet.features[0].geometry,
                symbol: window.mapConfig.symbols.polygonLocate,
              });
              _self.mapview.graphics.add(_self.selectedGraphic);
              paramObj = {
                feature: _self.selectFeature,
                featureLayer: _self.featureLayer,
              };
              if (toDetail)
                _self.$refs.qitaldDetailDialog.show(
                  _self.mapview,
                  _self.dianzldFeatureLayerView,
                  _self.selectFeature
                );
            });
          break;
        case "gusmm":
          _self.featureLayer = _self.gusmmFeatureLayer;
          _self.gusmmFeatureLayer
            .queryFeatures(queryParams)
            .then((featureSet) => {
              if (
                featureSet.features.length == 0 ||
                featureSet.features[0].geometry == null
              ) {
                _self.$message.error("暂无空间信息");
                return;
              }
              _self.selectFeature = featureSet.features[0];
              _self.mapview.goTo({
                target: featureSet.features[0].geometry,
                zoom: 20,
              });
              _self.selectedGraphic = new Graphic({
                geometry: featureSet.features[0].geometry,
                symbol: window.mapConfig.symbols.pointLocate,
              });
              _self.mapview.graphics.add(_self.selectedGraphic);
              paramObj = {
                feature: _self.selectFeature,
                featureLayer: _self.featureLayer,
              };
              if (toDetail)
                _self.$refs.gusmmDetailDialog.show(
                  _self.mapview,
                  _self.dianzldFeatureLayerView,
                  _self.selectFeature
                );
            });
          break;
        default:
          return;
      }
    },
    /**
     * @description: 显示点状绿地详情窗口
     * @param {*} graphic
     * @return {*}
     */
    showDianzldDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        this.$refs.dianzldDetailDialog.show(
          _self.mapview,
          _self.dianzldFeatureLayerView,
          feature
        ); // 显示弹框
      });
    },
    closed() {
      // this.activeName = "1";
      this.mapview.graphics.removeAll();
      this.mapview.popup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .pagination-container {
  padding: 0px !important;
}
</style>
